<template>
  <div style="width: 100%; height: 600px">
    <div ref="mapContainer" id="chart" style="width: 100%; height: 600px"></div>
    <button @click="setHigh" style="position: fixed;top: 10px;">点亮</button>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  name: "Echarts3DMap",
  data() {
    return {
      index: 1,
      myChart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    setHigh() {

    },
    initChart() {
      fetch("https://geo.datav.aliyun.com/areas_v3/bound/150000_full.json")
          // fetch("https://geo.datav.aliyun.com/areas_v2/bound/100000.json")
          // fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000.json")
          .then((response) => response.json())
          .then((data) => {
            // echarts.registerMap("china", {geoJSON: data});
            this.myChart = echarts.init(this.$refs.mapContainer);
            let option = {
              title: {
                text: '饼图程序调用高亮示例',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
              },
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };

            let currentIndex = -1;

            setInterval(() => {
              var dataLen = option.series[0].data.length;
              // 取消之前高亮的图形
              this.myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: currentIndex
              });
              currentIndex = (currentIndex + 1) % dataLen;
              // 高亮当前图形
              this.myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
              });
              // 显示 tooltip
              this.myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex
              });
            }, 1000);

            this.myChart.setOption(option);
            // // 监听点击事件
            this.myChart.on("click", (params) => {
              console.log("Clicked params:", params);
            });
          });
    },
    handleMapClick(params) {
      // 处理点击事件，params 中包含点击的信息
      alert(`点击了 ${params.name}`);
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #2c3e50;
}
</style>